<template>
    <div class="cate">
     <van-list
        v-model="loading"
        :finished="isEnd"
        finished-text="没有更多了"
        @load="getItemData"
      >
       <van-cell
         v-for="shop in catelist"
         :key="`shop-${shop.id}`"
       >
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <CartItem
            :image="shop.image"
            :id="shop.id"
            :title="shop.title"
            :price="shop.price"
            :saleNum="shop.saleNum"
            :type="shop.type"
          />
        </template>
      </van-cell>
    </van-list>
      <!-- <van-button v-if="isEnd" block disabled type="primary">没有更多了</van-button>
      <van-button v-else block round type="info" @click="loadMore">加载中更多</van-button> -->
    </div>
</template>

<script>
import CartItem from './CartItem'
export default {
  name: 'shopCategroy',
  data () {
    return {
      id: '',
      catelist: [],
      start: 0,
      isEnd: true,
      // 开关避免重复点击造成过多的数据请求
      loading: false
    }
  },
  components: {
    CartItem
  },
  created () {
    this.id = this.$route.params.id
    this.getItemData()
  },
  beforeRouteUpdate (to, from, next) {
    this.id = to.params.id
    next()
    this.start = 0
    this.catelist = []
    this.getItemData()
  },
  methods: {
    getItemData () {
      console.log('getdata')
      this.$http.getCategory(this.id, this.start)
        .then(resp => {
          const { list, nextIndex, isEnd } = resp.items
          // this.catelist.push(...resp.items.list)
          this.catelist = this.catelist.concat(list)
          // console.log(nextIndex)
          this.start = nextIndex
          this.isEnd = isEnd
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .cate{
    .van-list{
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      box-sizing: border-box;
    }
    .van-cell{
        width: 46%;
        border-color: black;
        margin: 4px;
        padding: 0;
        background-color:white;
      }
    .van-cell__title{
      width: 100%;
    }
  }
</style>
